<template>
  <div>
    <van-form ref="form" colon @submit="$emit('confirm')">
      <van-cell-group>
        <van-nav-bar :title="title" left-text="取消" right-text="确认" @click-left="$emit('cancel')"
                     @click-right="$refs.form.submit()"/>
        <van-field v-model="inputForm.sequence" type="digit" label="序号" placeholder="请输入序号"/>
        <van-field v-model="inputForm.title" label="名称" placeholder="请输入名称" :rules="[{ required: true }]"/>
        <van-field v-model="inputForm.period" readonly label="周期">
          <template #input>
            <van-radio-group v-model="inputForm.period" direction="horizontal">
              <van-radio v-for="item in $types.periodTypes" :key="item.value" :name="item.value">
                {{ item.text }}
              </van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field input-align="right" readonly label="手法" is-link clickable
                   @click="showPopup=true">
          <template #input>编辑</template>
        </van-field>
        <van-field v-model="inputForm.description" label="备注" placeholder="请输入备注" :rules="[{ required: true }]"/>
      </van-cell-group>
    </van-form>
    <van-popup v-model="showPopup" position="bottom" :style="{ height: '80%' }">
      <van-nav-bar title="添加手法" left-text="取消" right-text="确认" @click-left="showPopup = false"
                   @click-right="showPopup=false"/>
      <techno-form v-model="inputForm.config.long.buy" title="开多" :technoList="getTechnoList('long', 'buy')"/>
      <techno-form v-model="inputForm.config.long.sell" title="平多" :technoList="getTechnoList('long', 'sell')"/>
      <techno-form v-model="inputForm.config.short.sell" title="开空" :technoList="getTechnoList('short', 'sell')"/>
      <techno-form v-model="inputForm.config.short.buy" title="平空" :technoList="getTechnoList('short', 'buy')"/>
    </van-popup>
  </div>
</template>

<script>
export default {
  components: {
    TechnoForm: () => import('@/components/TechnoForm.vue')
  },
  props: {
    title: String,
    resultForm: Object
  },
  model: {
    prop: 'resultForm',
    event: 'change'
  },
  watch: {
    resultForm: {
      handler(newValue) {
        this.inputForm = newValue
      },
      immediate: true,
      deep: true
    },
    inputForm: {
      handler(newValue) {
        this.$emit('change', newValue)
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      inputForm: {
        hex_id: null,
        title: null,
        description: '暂无',
        sequence: 1,
        enabled: true,
        period: 'd',
        config: {
          long: {
            buy: {},
            sell: {}
          },
          short: {
            sell: {},
            buy: {}
          }
        }
      },
      technoList: [],
      showPopup: false
    }
  },
  methods: {
    load() {
      this.$requests.post('/china_stock/techno/obtain', {
        page: 1,
        limit: 100,
        order_by: 'sequence',
        sort_direction: 1
      }).then(resp => {
        this.technoList = resp.datas
      })
    },
    getTechnoList(direction, side) {
      let tempArray = []
      for (let i = 0; i < this.technoList.length; i++) {
        if (this.technoList[i].direction === direction && this.technoList[i].side === side) {
          tempArray.push(this.technoList[i])
        }
      }
      return tempArray
    }
  },
  mounted() {
    this.load()
  }
}
</script>
